<template>
  <div>
    <!-- 筛选头头 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-search"></i>
            筛选查询
            <div class="rightTop">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
              <el-button @click="Submit()">查询结果</el-button>
            </div>
          </el-header>
          <!-- 筛选条件 -->
          <div class="goodsrecycle-button-select-2" v-if="showSelect">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="活动名称:">
                <el-input v-model="formInline.title" placeholder="活动名称" class="select-width-1"></el-input>
              </el-form-item>
              <el-form-item label="活动开始时期：">
                <div class="block">
                  <el-date-picker
                    v-model="formInline.startTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </el-main>
    </el-container>

    <!-- 数据列表 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            活动列表
            <div class="rightTop">
              <el-form :inline="true" :model="listLine" class="demo-form-inline">
                <el-button @click="addActi">添加活动</el-button>
                <el-button @click="periodTime">秒杀时间段列表</el-button>
                <el-form-item label style="padding-top: 6px">
                  <el-select v-model="listLine.row" placeholder="显示条数" class="select-width-2">
                    <el-option label="10条" value="10"></el-option>
                    <el-option label="20条" value="20"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label style="padding-top: 6px">
                  <el-select v-model="sort" placeholder="排序方式" class="select-width-2">
                    <el-option label="默认" value="0"></el-option>
                    <el-option label="结束时间" value="1"></el-option>
                    <el-option label="活动状态" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="id" label="编号">
                <template slot-scope="scope">{{scope.row.id}}</template>
              </el-table-column>
              <el-table-column prop="title" label="活动名称">
                <template slot-scope="scope">{{scope.row.title}}</template>
              </el-table-column>
              <el-table-column prop="activityState" label="活动状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.activityState == 1">活动准备中</span>
                  <span v-if="scope.row.activityState == 2">活动进行中</span>
                  <span v-if="scope.row.activityState == 3">活动已结束</span>
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间">
                <template slot-scope="scope">{{scope.row.startTime}}</template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间">
                <template slot-scope="scope">{{scope.row.endTime}}</template>
              </el-table-column>
              <el-table-column prop="putType" label="上线/下架" width="100">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.putType" :active-value="1" :inactive-value="0"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" @click="updateActi(scope.$index, scope.row)" type="text">编辑</el-button>
                  <el-button size="mini" @click="deleteOne(scope.$index, scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import rebateApi from "@/api/operate/rebateActivities";
export default {
  data() {
    return {
      multipleSelection: [],

      //分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,
      sort: 0,

      //开起筛选
      selectrue: true,

      dialogVisible: false,
      showSelect: true,
      listLine: {
        row: "",
      },
      formInline: {
        title: "",
        startTime:null
      },
      tableData: []
    };
  },
  watch:{
    sort(Val,newVal){
      if(this.selectrue == true){
        this.inDataScreen(
          this.currentPage4,
          this.pageSize,
          Val,
          this.formInline.title,
          this.formInline.startTime,
        );
      }else{
        this.inDate(this.currentPage4,this.pageSize,Val);
      }
    }
  },
  methods: {
    // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }
      let d = new Date(str);
      let newDateYear = d.getFullYear();
      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";
      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },

    packUp() {
      this.showSelect = !this.showSelect;
    },
    Submit() {
      this.currentPage4=1;
      this.pageSize=2;
      this.inDataScreen(
        this.currentPage4,
        this.pageSize,
        this.sort,
        this.formInline.title,
        this.formInline.startTime
      )
    },
    addActi() {
      this.$router.push("/operation/addWithReducedActivity");
    },
    updateActi(index, row) {
      this.$router.push({
        push:"/operation/addWithReducedActivity",
        name: "updateWithReducedActivity",
        params: { id: row.id }
      });
    },
    deleteOne(index, rows) {
      var ids=rows.id
       this.$confirm("操作将永久删除此满减活动" + '<'+rows.title +'>'+ "是否继续？", "提示", {
        type: "warning"
      }).then(() => {
        rebateApi.getDeleteRebate(ids).then(Response=>{
          const reb=Response.data
          if(reb.code==200){
            this.inDate(this.currentPage4,this.pageSize,this.sort);
          }else {
            this.$message({
              message: "删除失败",
              type: "warning"
            });
          }
      })
      });
    },
    periodTime() {
      this.$router.push("/operation/periodTime");
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      if(this.selectrue==true){
        this.inDataScreen(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.title,
          this.formInline.startTime
        )
      }else{
        this.inDate(this.currentPage4,this.pageSize,this.sort);
      }
    },

    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      if(this.selectrue==true){
        this.inDataScreen(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.title,
          this.formInline.startTime
        )
      }else{
        this.inDate(this.currentPage4,this.pageSize,this.sort);
      }
    },

    inDate(pageNum,pageSize,sort){
      rebateApi.getPageFinds(pageNum,pageSize,sort).then(Response =>{
        this.tableData=Response.data.data.list;
        this.total=Response.data.data.total;
      });
    },

    //筛选查询
    inDataScreen(pageNum,pageSize,sort,title,startTime){
      if(title!=null || startTime!=null){
        this.selectrue=true;
      }else{
        this.selectrue=false;
      };
      if(startTime!=null){
        var time=this.parseTime(startTime);
      }else{
        var time=null;
      };
      rebateApi.getFindScreenList(pageNum,pageSize,sort,title,time).then(Response =>{
        this.tableData=Response.data.data.list;
        this.total=Response.data.data.total;
      })
    },
    // onSubmit(formInline) {
    //   this.$refs[formInline].validate(valid => {
    //     if (valid) {
    //       alert("submit!")
    //       this.visible = false
    //     } else {
    //       console.log("error submit!!")
    //       return false
    //     }
    //   })
    // },
    topSelect() {
      this.dialogVisible = true;
    },
    confirm(row) {
      this.dialogVisible = false;
    }
  },
  mounted(){
    this.inDate(this.currentPage4,this.pageSize,this.sort);
  }
};
</script>
<style scoped>
.rightTop {
  float: right;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 150px;
}
.centerTag {
  text-align: center;
}
.dateCss {
  float: left;
}
</style>
